<template>
  <div>
    <el-row>
      <el-col :span="2">
        <el-avatar v-if="mode === `left`" :src="avatar" shape="square"/>
      </el-col>
      <el-col :span="20">
        <div>
          <p>{{ username }}</p>
          <!-- 动态聊天记录组件 -->
          <component
              :is="component"
              :goodsName="goodsName"
              :goodsCover="goodsCover"
              :message="message"
              :mode="mode"
              :orderNo="orderNo"/>
        </div>
      </el-col>
      <el-col :span="2">
        <el-avatar v-if="mode === `right`" :src="avatar" shape="square"/>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>

/**
 * 聊天记录
 * 接收Chat.vue传递的聊天记录信息
 */
const props = defineProps({
  mode: {
    type: String,
    default: "left"
  },
  username: {
    type: String
  },
  avatar: {
    type: String
  },
  component: {
    type: Object
  },
  orderNo: {
    type: String
  },
  goodsName: {
    type: String
  },
  goodsCover: {
    type: String
  },
  message: {
    type: String
  }
})


</script>

<style scoped>

</style>
